<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <title>Title</title>
</head>
<style>
  #container {
    width: auto;
    height: 520px;
  }

  #myPageTop {
    width: 180px;
    position: absolute;
    top: 16px;
    right: 10px;
    background: #fff;
    padding: 7px;
    border: 1px solid #d7d7d7;
    border-radius: 2px;
  }

  .amap-sug-result {
    max-width: 180px;
  }

  .auto-item {
    max-width: 172px;
    overflow: hidden;
  }
  .amap-icon img{
    width: 30px;
  }
</style>
<body>
<div id="container"></div>
<div id="myPageTop">
  <table>
    <tr>
      <td>
        <label style="font-size: 12px;">请输入关键字：</label>
      </td>
    </tr>
    <tr>
      <td>
        <input class="layui-input" id="tipinput"/>
      </td>
    </tr>
  </table>
</div>
<div style="display: flex;margin-top: 10px;justify-content: space-around;">
  <div style="width: 30%;display: flex;overflow: hidden;">
    <div style="font-size: 14px;color: #787878;white-space: nowrap;">地址：</div>
    <div style="font-size: 12px;color: #787878;line-height: 20px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
         id="name"></div>
  </div>
  <div style="width: 30%;display: flex;">
    <div style="font-size: 14px;color: #787878;">经度：</div>
    <div style="font-size: 12px;color: #787878;" id="lng"></div>
  </div>
  <div style="width: 30%;display: flex;">
    <div style="font-size: 14px;color: #787878;">维度：</div>
    <div style="font-size: 12px;color: #787878;" id="lat"></div>
  </div>
</div>
</body>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: 'a0b2bb97c2a83816ede7587651bb4f46',
  }
  var name = "{$name}";
  var lng = "{$lng}";
  var lat = "{$lat}";
  var province = "";
  var city = "";
  var area = "";
  document.getElementById('name').innerText = name;
  document.getElementById('lng').innerText = lng;
  document.getElementById('lat').innerText = lat;
  var hotstatus = false;
  AMapLoader.load({
    "key": "4f61171283f9cf3b4e0b0649bd55e4df",              // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": ["AMap.Scale", 'AMap.PlaceSearch', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.Geocoder', 'AMap.ElasticMarker'],
    // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {             // 是否加载 AMapUI，缺省不加载
      "version": '1.1',   // AMapUI 版本
      "plugins": ['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
    },
    "Loca": {                // 是否加载 Loca， 缺省不加载
      "version": '2.0'  // Loca 版本
    },
  }).then((AMap) => {
    if (lng && lat) {
      var position = new AMap.LngLat(lng, lat);//标准写法
      var map = new AMap.Map('container', {
        center: position,
        resizeEnable: true,
        zoom: 20
      });
      addMarker(lng,lat);
    } else {
      var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 13
      });
      marker = null;
    }
    var autoOptions = {
      input: "tipinput"
    };
    //尺寸
    map.addControl(new AMap.Scale());
    map.addControl(new AMap.ElasticMarker());
    map.addControl(new AMap.Geolocation());
    var auto = new AMap.AutoComplete(autoOptions);
    var geocoder = new AMap.Geocoder({
      redius: 100,
      extensions: "all"
    });
    var placeSearch = new AMap.PlaceSearch({
      map: map
    });  //构造地点查询类
    auto.on("select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
      placeSearch.setCity(e.poi.adcode);
      placeSearch.search(e.poi.name);  //关键字查询查询
    }

    map.on('hotspotclick', function (hot) {
      hotstatus = true;
      name = hot.name;
      lng = hot.lnglat.lng;
      lat = hot.lnglat.lat;
      document.getElementById('name').innerText = name;
      document.getElementById('lng').innerText = lng;
      document.getElementById('lat').innerText = lat;
    });
    //点击时间
    map.on('click', function (e) {
      clearMarker();
      lng = e.lnglat.lng;
      lat = e.lnglat.lat;
      addMarker(lng,lat);
      geocoder.getAddress([lng, lat], function (status, result) {
        if (status == 'complete') {
          //获取省市区
          province = result.regeocode.addressComponent.province;
          city = result.regeocode.addressComponent.city;
          area = result.regeocode.addressComponent.district;
          if (!hotstatus) {
            name = result.regeocode.formattedAddress;
            document.getElementById('name').innerText = name;
            document.getElementById('lng').innerText = lng;
            document.getElementById('lat').innerText = lat;
          } else {
            hotstatus = false;
          }
        }
      });
    });

    //添加点标记
    function addMarker(lng,lat) {
      marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
        position: [lng, lat],
        offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(map);
    }
    //删除点标记
    function clearMarker() {
      if (marker) {
        marker.setMap(null);
        marker = null;
      }
    }
  }).catch((e) => {
    console.error(e);  //加载错误提示
  });
  var callbackdata = function () {
    var arr = {};
    arr.name = name;
    arr.lng = lng;
    arr.lat = lat;
    return arr;
  }
</script>
</html>